<template>
  <el-dialog title="详情" :close-on-click-modal="false" append-to-body :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px"
        label-position="right">
        <template v-if="!loading">
          <el-col :span="24">
            <jnpf-form-tip-item label="分类名称" prop="name">
              <p>{{dataForm.name}}</p>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="上级分类" prop="parentId">
              <p>{{dataForm.parentId}}</p>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="佣金比例(%)" prop="commissionRate">
              <JnpfNumber v-model="dataForm.commissionRate_name" placeholder="数字文本" disabled
                :step="1">
              </JnpfNumber>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="排序值" prop="sortOrder">
              <JnpfNumber v-model="dataForm.sortOrder_name" placeholder="数字文本" disabled :step="1">
              </JnpfNumber>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="是否支持绑定" prop="supportBinding">
              <p>{{dataForm.supportBinding}}</p>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="状态" prop="state">
              <p>{{dataForm.state}}</p>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="分类图标" prop="image">
              <JNPF-UploadImg v-model="dataForm.image" disabled detailed :fileSize="10"
                sizeUnit="MB" :limit="1" pathType="defaultPath" :isAccount="0">
              </JNPF-UploadImg>
            </jnpf-form-tip-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
    </span>
    <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
  </el-dialog>
</template>
<script>
import request from '@/utils/request'

import { getConfigData } from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import { thousandsFormat } from "@/components/Generator/utils/index"
export default {
  components: { Detail },
  props: [],
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,

      dataForm: {
        id: '',
        name: '',
        parentId: "",
        commissionRate: 0,
        sortOrder: 0,
        supportBinding: "false",
        state: "false",
        image: [],
      },
      parentIdProps: { "label": "fullName", "value": "id", "children": "children" },
      supportBindingProps: { "label": "fullName", "value": "enCode" },
      stateProps: { "label": "fullName", "value": "enCode" },

    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() { },
  methods: {
    toDetail(defaultValue, modelId) {
      if (!defaultValue) return
      getConfigData(modelId).then(res => {
        if (!res.data || !res.data.formData) return
        let formData = JSON.parse(res.data.formData)
        formData.popupType = 'general'
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(formData, modelId, defaultValue)
        })
      })
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.image = _dataAll.image ? JSON.parse(_dataAll.image) : []
      this.dataForm = _dataAll
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/BankCategory/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    },
  },
}

</script>
